<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>菜鸟教程</title>
    <link rel="stylesheet" href="HTML_Brief_Introduction.css">
    <script rel="script" src="HTML_Brief_Introduction.js"></script>
</head>

<body>

    <div class="PanelClass" id="PanelID">
        <div class="HeaderClass" id="HeaderID">
            <h1>JavaScript程序</h1>
            <p class="PClass" id="Demo">一个段落</p>
            <button type="button" onclick="DisplayDate()">显示日期</button>
        </div>
        <div class="ContentClass" id="ContentID">
            <!--注意下面的ChangeImage()这个函数是有()的-->
            <img id="MyImage" onclick="ChangeImage()" src="pic_bulboff.gif">
            <p>点击灯泡就可以打开或关闭这盏灯</p>
        </div>
    </div>




</body>

</html>

<!--
    <a href="#"></a>
    基本结构：‌
        <a>：        锚点标签，用于创建超链接
        href="#"：   链接目标为当前页面顶部
        空内容：    标签内没有显示文本
    功能特点：‌
        点击后会滚动到页面顶部
        常用于临时占位链接或JavaScript交互的锚点
        不会跳转到其他页面或外部链接
    常见用途：‌
        页面内导航的占位符
        配合JavaScript实现动态功能
        作为返回顶部按钮的基础结构


        在HTML里面<p>标签是会产生换行的

    <span></span> 标签
    <span> 是 HTML 中的一个内联容器元素，主要用于对文本或其他内联元素进行分组和样式化
    主要特点：‌
        内联元素‌：不会独占一行，仅占据其内容所需的空间
        无语义含义‌：本身不带有任何语义，纯粹用于样式和脚本操作
        常用场景‌：
            对部分文本应用特定样式（颜色、字体等）
            通过 JavaScript 操作特定文本片段
            配合 CSS 类名实现精细化样式控制

            ‌与 <div> 的区别：‌
                    <span> 是内联元素，适合文本级别操作
                    <div> 是块级元素，适合页面布局和结构分组
                    <span> 元素在前端开发中非常实用，特别适合需要对小段内容进行独立控制的情况

     var myCollection = document.getElementsByTagName("p");
     上面的 myCollection是HTMLCollection 对象,这个对象类似于包含 HTML 元素的一个数组(但其实不是数组)
     NodeList 对象是一个从文档中获取的节点列表 (集合)。
     NodeList 对象类似 HTMLCollection 对象。
-->